<!DOCTYPE html>
<html>

<head>
    <title>osm buildings demo</title>
    <link type="text/css" rel="stylesheet" href="./css/maptalks.css">
    <script type="text/javascript" src="./js/maptalks.js"></script>
    <script type="text/javascript" src="./js/three.min.js"></script>
    <script type="text/javascript" src="./js/maptalks.three.js"></script>
    <style>
    html,
    body {
        margin: 0px;
        height: 100%;
        width: 100%;
    }

    #map {
        width: 100%;
        height: 100%;
    }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
    const tiandituURL = 'http://t0.tianditu.com/DataServer?T={s}&x={x}&y={y}&l={z}&tk=95f0a5688ec713adb3dd1735533f6fcb';
    const points = [ [ 106.65846, 26.13358 ], [ 106.65846, 26.13412 ], [ 106.65912, 26.13412 ], [ 106.65912, 26.13358 ] ];
    const points1 = [ [ 106.65646, 26.13358 ], [ 106.65646, 26.13412 ], [ 106.65712, 26.13412 ], [ 106.65712, 26.13358 ] ];
    const map = new maptalks.Map('map', {
        center: points[0],
        zoom: 18,
        pitch: 70,
        bearing: 0,
        centerCross: false,
        doubleClickZoom: false,
        baseLayer: new maptalks.TileLayer('img_w', { urlTemplate: tiandituURL, subdomains: ['img_w'] }),
        layers: [ new maptalks.TileLayer('cia_w', { urlTemplate: tiandituURL, subdomains: ['cia_w'] }) ],
    });
    const polygons = [ points ];
    const polygons1 = [ points1 ];
    const threeLayer = new maptalks.ThreeLayer('three', { forceRenderOnMoving: true, forceRenderOnRotating: true });
    threeLayer.prepareToDraw = function (gl, scene, camera) {
        const self = this;
        const light = new THREE.DirectionalLight(0xffffff);
        light.position.set(0, -10, 10).normalize();
        scene.add(light);

        for (const polygon of polygons1) {
            const materials = [];
            materials.push(new THREE.MeshBasicMaterial({ color: 'red' }));
            materials.push(new THREE.MeshBasicMaterial({ color: 'blue' }));
            materials.push(new THREE.MeshBasicMaterial({ color: 'green' }));
            materials.push(new THREE.MeshBasicMaterial({ color: 'pink' }));
            materials.push(new THREE.MeshBasicMaterial({ color: 'black' }));
            materials.push(new THREE.MeshBasicMaterial({ color: 'white' }));
            const mesh = self.toExtrudeMesh(new maptalks.Polygon(polygon), 100, materials);
            scene.add(mesh);
        }
        for (const polygon of polygons) {
            const materials = [];
            materials.push(new THREE.MeshBasicMaterial({ color: 'red' }));
            materials.push(new THREE.MeshBasicMaterial({ color: 'blue' }));
            materials.push(new THREE.MeshBasicMaterial({ color: 'green' }));
            materials.push(new THREE.MeshBasicMaterial({ color: 'pink' }));
            materials.push(new THREE.MeshBasicMaterial({ color: 'black' }));
            materials.push(new THREE.MeshBasicMaterial({ color: 'white' }));
            const mesh = self.toBoxMesh(new maptalks.Polygon(polygon), 100, materials);
            scene.add(mesh);
        }
    };
    threeLayer.addTo(map);
    </script>
</body>

</html>
